<template>
    <div class="projects">
        <div style="position: relative;left: 115px">
            <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="120px">
                <el-form-item label="游记标题" prop="address">
                    <el-input
                            v-model="queryParams.name"
                            placeholder="请输入游记标题"
                            clearable
                            size="small"
                    />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                    <el-button style="position: relative;left:800px" type="primary"  size="mini" @click="goSubmit">发布游记</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="wrapper">
            <div class="project" v-for="item in travels" :key="item.id" @click="goDetail(item.id)">
                <div class="left">
                    <img
                            width="100%"
                            :src="item.pic"
                            alt=""
                    />
                </div>
                <div class="right">
                    <div class="name" >游记标题：{{item.name}}</div>
                    <div class="date">游记内容：{{item.content}}</div>
                    <div  style="margin-top: 100px"><img width="18px" height="18px" src="https://s3.bmp.ovh/imgs/2022/04/12/3f9363aa4666717e.jpeg"/>
                        <label style="font-size: 20px">({{item.goodNum}})</label></div>
                </div>
            </div>
        </div>
        <div class="fr-el-page" style="text-align: center">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="queryParams.pageNum"
                    :page-sizes="[4]"
                    :page-size="queryParams.pageSize"
                    layout="total, sizes, prev, pager, next"
                    :total="queryParams.total"
            >
            </el-pagination>
        </div>
    </div>

</template>

<script>
    import {listTravels} from "@/utils/request";

    export default {
        name: "travels",
        data() {
            return {
                travels: [],
                queryParams: {
                    pageNum: 1,
                    pageSize: 4,
                    total:0,
                    name:''
                }
            }
        },
        methods: {
            findTravels() {
                listTravels(this.queryParams).then(res => {
                    if (res.code == 200) {
                        this.travels = res.rows;
                        this.queryParams.total=res.total;
                    } else {
                        this.$message({
                            type: 'error',
                            message:res.msg
                        })
                    }
                })
            },
            handleSizeChange(val) {
                this.queryParams.pageSize=val;
                this.queryParams.pageNum=val;
                this.findTravels();
            },
            handleCurrentChange(val) {
                this.queryParams.pageNum=val;
                this.queryParams.pageNum=val;
                this.findTravels();
            },
            goDetail(id){
              // 跳转到详情页面，并且传递id
              this.$router.push({path:'/travelsDetail',query:{id:id}})
            },
            /** 搜索按钮操作 */
            handleQuery() {
                this.queryParams.pageNum = 1;
                this.findTravels();
            },
            goSubmit(){
                // 跳转到详情页面，并且传递id
                this.$router.push({path:'/submitTravels'})
            },
        },
        created() {
            this.findTravels()
        }
    }
</script>

<style scoped lang='scss'>
.projects {
  .wrapper {
    width: 1240px;
    .title {
      font-size: 20px;
      line-height: 80px;
      border-bottom: 1px solid #f4f4f4;
    }
    .project {
      display: flex;
      padding: 1em 0;
      border-bottom: 1px solid #f4f4f4;
      .left {
        width: 300px;
        height: 200px;
        background-color: #f4f4f4;
        border-radius: 5px;
        overflow: hidden;
      }
      .right {
        flex: 1;
        padding: 0 2em;
        .name {
          font-weight: bolder;
          font-size: 1em;
            text-align: center;
        }
        .date {
          margin: 1em 0;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
        }
      }
    }
  }
}
</style>
